<template>
    <div class="wrapper">
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="商家ID"
      width="150">
      <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.id"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.id}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="goodName"
      label="商品名"
      width="130">     
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.goodName"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.goodName}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="280">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.title"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.title}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="text"
      label="说明"
      width="300">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.text"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.text}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="classify"
      label="分类"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.classify"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.classify}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="inventory"
      label="库存"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.inventory"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.inventory}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="currentPrice"
      label="现价"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.currentPrice"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.currentPrice}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      prop="price"
      label="原价"
      width="130">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.price"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.price}}</span>
        </template>   
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="250">
       <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-if="scope.row.show" v-model="scope.row.date"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.date}}</span>
        </template>   
      <template slot-scope="scope">
        <el-button type="text" size="medium" @click="scope.row.show = true">编辑</el-button>
        <el-button type="text" size="medium" @click="scope.row.show = false">保存</el-button>
        <el-button type="text" size="medium" @click="addLine">添加</el-button>
        <el-button type="text" size="medium" @click="addLine">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
  export default {
    methods: {
      addLine(){
          let line = {
                id: '',
                goodName: '',
                title: '',
                text:'',
                classify:'',
                inventory:'',
                currentPrice: '',
                price: '',
                show: true
          }
          this.tableData.push(line)
      }
    },

    data() {
      return {
        tableData: [{
          id: '2016-05-02',
          goodName: '王小虎',
          title: '辣条',
          text:2,
          classify:5,
          inventory:1,
          currentPrice: '上海',
          price: '普陀区',
          show: false
        }]
      }
    }
  }
</script>

<style lang="scss" scoped>
    .wrapper{
        width: 85%;
        margin: 0 auto ;
    }
</style>